Revision:
Example: square
code:
<svg viewBox="0 0 600 110" >
<rect width="300" height="100" x="60" y="5" rx="10" ry="10" style="fill:aqua;
stroke-width:1vw;stroke:blue"/>
</svg>
Explanations:
SVG icons are always created using <svg>...</svg> tags.
With the viewBox attribute, the position and dimension in the SVG viewport are defined.
In the example, the "0 0" numbers indicate that the SVG element is placed at the top left corner. Then the "600 110" numbers are the width and height of the SVG element.
The <rect … /> part is used to indicate the drawing of a rectangle shape.
Within these tags, the x-axis (pointing towards the right) and y-axis (pointing down) as well as the SVG width and height are set.
The width and height are defining the dimensions of the shape, while the x and y are defining its position.
rx= and ry= stand for radius. Setting a value will result in the sides of the rectangle being curved.
To further style your rectangle, you can use the "style="..." tag and add things like "fill", "stroke-width", and "stroke".
Or, alternatively, you can set class names to the <svg> or <rect> elements and define their style in a separate stylesheet CSS file.
Use the <img> tag:
The image size can be controlled using "width" and/or "height" attributes, but color cannot be controlled.
This technique is fully compatible with all modern browsers except IE8 (and older IEs) and early model Android phones.
The basic usage of "img" for SVG files can be enhanced using fragment identifiers, which are a built-in SVG property : a SVG portion can be referenced using a SVG view specification or addressing an SVG element by its <view> ID. The first method consists in specifying a viewBox when loading a SVG file (e.g. <img src="svg_file.svg#svgView(viewBox(x,y,w,h))">), where x,y,w,h represent fragment coordinates from file origins (x and y) and fragment width and height (w and h). The second way requires that the SVG contains a specific <view> of the fragment.
Use the <symbol> element, the <defs> element, the <use> element
This method uses the svg tag as a wrapper in which every icon is described into a <defs> or <symbol> tag.
code:
<svg>
<defs>
<g id="icon1">
<!-- icon shape here -->
</g>
</defs>
<symbol id="icon2" viewBox="0 0 100 100">
<!-- icon shape here -->
</symbol>
</svg>
With the <symbol> element and <defs> element, the SVG icon is defined once and it is used with the <use> element anywhere in any count without writing duplicate SVG.
code:
<svg viewBox="0 0 100 100">
<use xlink:href="#icon1" />
</svg>
<svg>
<use xlink:href="#icon2" />
</svg>
Complex SVG files can end up with a high file size. But there are many ways to shed bytes from an SVG.
use less anchor points: each anchor point adds a handful of characters in your path. You can often skip an anchor point without much visual difference.
remove any element or anchors that are out of view: elements can be invisible, outside the viewBox, and completely behind other elements. In all these cases, if these SVG elements add nothing visually, they're bulking up the file size for no reason. This also applies to comments in your code.
simplify hidden sections: if a portion of a path is behind another element or outside the viewBox, remove the unseen curves and anchors.
rounding: cutting off a good chunk of decimals will often result in no noticeable difference in the image when rendered in the browser.
combine separate paths: multiple paths that are layered together and have same styles can be combined into a single path. By code, multiple paths can be placed into a single element's d="" attribute.
use CSS classes to apply complex styles: applying multiple attributes to a single element can add up the characters. However, the moment that complex class is applied to multiple elements, savings are made. However, CSS doesn't work inside Data URIs.
group elements with the same styles: elements that all have a fill of purple could simply be wrapped in a group tag and only need one fill attribute to affect all elements. This can work for most attributes and even with CSS classes.
use the <use> element for duplicate shapes: the <use> element creates a copy of a specific element or group of elements. All that is needed is an ID and then attributes can be changed or transformed (scale, rotate, and translate).
remove unnecessary commas and spaces: while commas and extra whitespace can make the code blob more readable for humans, they're often not needed. With paths you never need space next to a letter and their coordinates don't need commas. Also spaces are not needed before negative numbers.
use the shortest path command: if a path has coordinates that are nearby each other, using a relative path can help omit a few digits here and there. In general a mix of relative and absolute commands will be shorter than a pure relative or absolute path.
avoid negative numbers: the idea is to avoid placing a coordinate system where there will be negative coordinates. The only worry is that sometimes this will push you out farther from [0,0], producing larger numbers in your coordinates. But if your path is dancing above and left of [-1,-1], you're eliminating a character from every X and Y point.